// 默认角色管理
<template>
  <div class="containerBox wrap">
    <!-- 查询form -->
    <cusCard>
      <div class="searchBox">
        <el-form :model="roleForm" :inline="true">
          <el-form-item label="角色名称:">
            <el-input v-model.trim="roleForm.roleName" placeholder="请输入角色名称" @keyup.enter="searchHandler" clearable />
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>

      </div>
    </cusCard>

    <!-- 角色 table -->
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')" v-hasPerm="20">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="roleTableData" :tableColumns="tableColumns" :showSelect="false" @changeCol="changeCol"
        :loading="loading">
        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)" v-hasPerm="30">编辑
          </cusButton>
          <el-popconfirm width="250" confirm-button-text="确认" cancel-button-text="取消" :title="`确认删除${row.name}吗?`"
            @confirm="delHandler(row.id)">
            <template #reference>
              <cusButton style="color:#0052D9;padding:0" :text="true" v-hasPerm="40">删除</cusButton>
            </template>
          </el-popconfirm>
        </template>
      </cusTable>
      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>

    <!-- 编辑/添加角色弹框 -->
    <editDialog ref="editRef" @OnInit="getPreserveList"></editDialog>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import editDialog from "./components/editDialog.vue";
import {
  reqPreserveList,
  reqPreserveDelete,
} from "@/api/business/role";

/**
 * 初始化数据
 * @param formInit 初始搜索表单数据
 * @param pageInit 初始分页数据
 */
const formInit = () => ({
  roleName: "",
});

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const loading = ref(false);

// 搜索表单
const roleForm = ref(formInit());
// 请求表格数据
const getPreserveList = () => {
  loading.value = true;
  reqPreserveList({
    pageSize: pageObj.value.pageSize,
    currentPage: pageObj.value.page,
    name: roleForm.value.roleName,
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      roleTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};

// 删除角色
const delHandler = (id) => {
  reqPreserveDelete({ id }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("删除角色成功");
      getPreserveList();
    } else {
      ElMessage.info(res.msg);
    }
  });
};

onMounted(() => {
  getPreserveList();
});

const searchHandler = () => {
  getPreserveList();
};

const editRef = ref(null);
// 添加事件
const addHandler = (type, row) => {
  if (type == "edit") {
    editRef.value.show(row.id);
    return;
  }
  editRef.value.show();
};

// 表格列数据
const tableColumns = reactive([
  { label: "角色名称", prop: "name" },
  { label: "角色描述", prop: "descr" },
  { label: "创建时间", prop: "gmtCreate" },
  { label: "操作", prop: "operation", slot: true, width: "100" },
]);
// 表格数据
const roleTableData = ref([]);

// 重置
const resetHandler = () => {
  pageObj.value = pageInit();
  roleForm.value = formInit();
  getPreserveList();
};

// 改变列排序
const changeCol = ({ oldIndex, newIndex }) => {
  console.log(oldIndex, newIndex);
  const empty = 1; // 跳过选择框和序号列
  const oldItem = tableColumns[oldIndex - empty];
  tableColumns.splice(oldIndex - empty, 1);
  tableColumns.splice(newIndex - empty, 0, oldItem);
};

// 分页数据
const pageObj = ref(pageInit());

const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getPreserveList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getPreserveList();
};
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;

  &-table {
    flex: 1;
  }

  .imgBox {
    width: 60px;
    height: 60px;
    position: relative;

    .mask {
      width: 60px;
      height: 60px;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba($color: #000000, $alpha: 0.5);
      color: #ffffff;
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &:hover .mask {
      opacity: 1;
    }
  }
}
</style>